<!DOCTYPE html>
{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{% static 'js/jquery/1.9.1/jquery.js' %}"></script>
    <script src="{% static 'js/jQMeter/jqmeter.min.js' %}"></script>
    <style type="text/css">
        #logoutput {overflow: scroll; white-space: nowrap;}
    </style>
</head>
<body>
    <div id="procPer"></div>
    <div id="jqmeter-container"></div>
    <span id="app_name" style="visibility: hidden">{{ app_name }}</span>
    <span id="deploy_version" style="visibility:hidden">{{ deploy_version }}</span>
    <span id="env_name" style="visibility:hidden">{{ env_name }}</span>
    <span id="operation_no" style="visibility:hidden">{{ operation_no }}</span>
    <div id="logoutput" style="background:#000; color:#FFF;">...</div>
</body>
<script>
var websocket = null;
var app_name = document.getElementById("app_name").innerHTML;
var deploy_version = document.getElementById("deploy_version").innerHTML;
var env_name = document.getElementById("env_name").innerHTML;
var operation_no = document.getElementById("operation_no").innerHTML;

// 判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    var messageContainer = document.getElementById("logoutput");
    var percentContainer = document.getElementById("procPer");
    var hostname = window.location.hostname;
    var port = window.location.port || 8888;
    console.log(hostname, port);
    websocket = new WebSocket("ws:" + hostname + ":" + port + "/channels_ws/");
}
else {
    alert("Not support websocket.")
}

// WebSocket连接发生错误的回调方法
websocket.onerror = function () {
    console.log("error");
};

// WebSocket连接成功建立的回调方法
websocket.onopen = function (evt) {
    console.log("open");
};

// 接收到WebSocket消息的回调方法
websocket.onmessage = function (evt) {
    //console.log("new msg is: ", evt.data);
    if (evt.data.length != 0) {
        var temp_array = evt.data.split("\n");
        for (temp_item in temp_array) {
            if (temp_array[temp_item].indexOf("[ERROR]") > 0) {
                temp_array[temp_item] = "<font color='red'>" + temp_array[temp_item] + "</font>"
            }
            temp_array[temp_item] = temp_array[temp_item].replace(/\\n/g, "</br>");
            temp_array[temp_item] = temp_array[temp_item] + "</br>";
            messageContainer.innerHTML += temp_array[temp_item];
        }
    }

    var d = messageContainer.scrollHeight;
    messageContainer.scrollTop = d;
    var ans = messageContainer.innerHTML.match(/\w+.\w+.\w+.\w+,\sdeploy\sprogress\s\d+/g);
    var dic = {};
    for (item in ans) {
        dic_key = ans[item].split(",")[0];
        dic_value = ans[item].split(",")[1].split(" ")[3];
        dic[dic_key] = dic_value;
    }
    for (key in dic) {
        if (document.getElementById(key + "label") == undefined) {
            var span = document.createElement("span");
            span.setAttribute("id", key + "label");
            percentContainer.appendChild(span);
            document.getElementById(key + "label").innerHTML = key + ": " + dic[key] + "%</br>";
        }
        else {
            document.getElementById(key + "label").innerHTML = key + ": " + dic[key] + "%</br>";
        }
        // 调用jQuery进度条插件jQMeter
        $("#jqmeter-container").jQMeter({
            goal: '100',
            raised: dic[key],
            width: '200px',
            height: '30px',
            bgColor: '#CCCCCC',
            barColor: '#FF0000'
        });
    }
};

// WebSocket连接关闭的回调方法
websocket.onclose = function () {
    console.log("close");
};

// 监听窗口关闭事件，当窗口关闭时，主动去关闭WebSocket连接，防止连接还没断开就关闭窗口，Server端会抛出异常
window.onbeforeunload = function () {
    websocket.close();
};

// 定义关闭WebSocket连接方法
function closeWebSocket() {
    websocket.close();
}

// 间隔2秒，向WebSocket服务端发送消息
setInterval(function send() {
    var message = {
        "deploy_version": deploy_version,
        "app_name": app_name,
        "env_name": env_name,
        "operation_no": operation_no
    };
    websocket.send(JSON.stringify(message));
}, 2000);
</script>
</html>